<template>
  <div>
    <div id="vs" style="border: 1px solid blue;"></div>
    <div style="margin-top: 50px; border: 1px solid blue;">
      <video controls width="250">
        <source src="http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4" type="video/webm" />

        Download the
        <a href="http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4">WEBM</a>
        or
        <a href="/media/cc0-videos/flower.mp4">MP4</a>
        video.
      </video>
      <el-button @click="handlePlay">播放</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { storeToRefs } from 'pinia'
import Player from 'xgplayer';
import 'xgplayer/dist/index.min.css';

const handlePlay = () => {
    window.open('http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4', '_blank')
}
onMounted(() => {
    nextTick(() => {
        const player = new Player({
            id: 'vs',
            url: 'http://s2.pstatp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4',
            poster: 'https://www.baidu.com/img/flexible/logo/pc/result.png',
            lang: 'zh-cn'
        })
    })
})
</script>
<style scoped lang="scss">
</style>